<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Handlebars</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
</head>
<script id="class-template" type="text/x-handlebars-template">
    {{#each this}}
    <li data-id="{{id}}">
        <div class="innerbox">
            <img src="{{image}}" alt=" ">
            <div class="titlediv ">
                <span class="title ">{{title}}</span> {{#equal hasover 1}} <span class="note ">有笔记</span>{{/equal}}
            </div>
            <div class="subtitle ">{{subtitle}}</div>
            <div class="subtitle {{#long timespan}} long {{else}} short {{/long}}">时间：{{timespan}}</div>
        </div>
    </li>
    {{/each}}
</script>
<script id="pag-template" type="text/x-handlebars-template">
    <ul>
        {{#each this}}
        <li data-id={{index}} {{#if cur}} class="cur" {{/if}} {{#if clickable}} class="clickable" {{/if}}>{{{text}}}</li>
        {{/each}}
    </ul>
</script>
<script id="chapter-template" type="text/x-handlebars-template">
    <ul class="titleul">
        {{#each this}}
        <li class="titleli">
            <div class="title">{{addone @index}}.{{title}}</div>
            <ul>
                {{#each subTitle}}
                <li class="subtitle">
                    {{addone @../index}}-{{addone @index}}
                    <a href="http://www.imooc.com/video/{{mid}}">{{title}}</a> {{#if timespan}}<span class="type">{{timespan}}</span>{{/if}}
                    {{#equal titletype 'code'}}
                    <span class="type">[编程]</span> {{else}} {{#equal titletype 'ceping'}}
                    <span class="type">[练习]</span> {{/equal}}{{/equal}}
                </li>
                {{/each}}
            </ul>
        </li>
        {{/each}}
    </ul>
</script>

<script id="note-template" type="text/x-handlebars-template">
    <ul class="noteul">
        {{#each this}}
        <li>
            <div class="time">{{formatDate notetime}}</div>
            <div class="content">
                {{{content}}}
            </div>
        </li>
        {{/each}}
    </ul>
</script>

<body>
    <div class="banner ">
        <h1>我的笔记本</h1>
        <h3>你的指尖，有改变的世界力量</h3>
    </div>
    <div class="classes" id="classes">
        <ul></ul>
    </div>
    <div class="pag" id="pag"></div>
    <div class="overlap"></div>
    <div class="notedetail">
        <div class="chapterdiv">

        </div>
        <div class="notemiddle">

        </div>
        <div class="notediv">

        </div>
    </div>
</body>
<script type="text/javascript " src="js/main.js "></script>

</html>